

<!-- 分类 -->
<template>
	<view class="container">
	
		<!-- header部分 -->
		<view class="bg-Container header-height">
			<image class="bg" :src="icon.headerBg" mode=""></image>
	
			<!-- 导航栏 -->
			<view class="header-Container header-height">
				<view class="content">
					
					<!-- 模糊搜索 -->
					<view class="search-input">
						<image :src="icon.search" mode="widthFix"></image>
						<input key="categorySearch" confirm-type="搜索" placeholder-class="placeholder" @tap="bindKeyInput" placeholder="搜索" />
					</view>
	
					
					<view @click="gotoMsgCenter()" class="msgCenter-Container">
						<image class="btn-icon" :src="icon.message" mode=""></image>
						<view v-if="noticeTipCount" class="msgCount">
							{{noticeTipCount > 99 ? '99+' : noticeTipCount}}
						</view>
					</view>
				</view>
			</view>
		</view>	
		
		
		<!-- 页面内容 -->
		<view class="page-content headerNext">
			<view class="left-aside" style="position: relative;">
				<!-- 一级分类 -->
				<scroll-view scroll-y='true' class="left-aside">
					<view v-for="item in firstCategoryList" :key="item.id" class="f-item b-b" :class="{active: item.id === currentId}"
					 @click="tabtap(item)">
						{{item.name}}
						<view v-if="item.label" class="tip" >{{item.label}}</view>
					</view>
				</scroll-view>
			</view>

			<!-- 二三级分类 -->
			<scroll-view scroll-with-animation scroll-y class="right-aside">
				<view v-for="item in second3CategoryList" :key="item.id" class="s-list" :id="'main-'+item.id">
					<text class="s-item">{{item.name}}</text>
					<view class="t-list">
						<view @click="navToList(titem.id, titem.name)" class="t-item" v-for="titem in item.thirdGoodsCategories" :key="titem.id">
							<image :src="imgSite + titem.img"></image>
							<text>{{titem.name}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		data() {
			return {
				icon: {
					headerBg: '/static/images/common/header.png',
					search: '/static/images/index/search.png',
					message: '/static/images/index/message.png'
				},
				
				// 消息数量
				noticeTipCount: 0,
				
				currentId: -1,
				firstCategoryList: [],
				second3CategoryList: [],

				search: ''
			}
		},
		computed: {
			...mapState(['imgSite', 'hasLogin'])
		},
		onLoad() {
			this.loadData();
		},
		onShow() {
			this.getMsgCount();
		},
		methods: {

			// 消息数量
			getMsgCount() {
				
				var that = this;
				if (this.hasLogin) {
					let that = this;
					this.$api.globalUtil.requestAjax({
						url: '/customerNoticeApi/customerNoticeUnreadCountApi',
						method: 'POST',
						data: {
							cnType: "",
							cnStatus: '0'
						},
						success: function(res) {
							that.noticeTipCount = res.data.response;
						}
					});
				}
			},
			// goto消息中心
			gotoMsgCenter() {
				let that = this;
				that.$api.globalUtil.methodFilter({
					that: that,
					success: function() {
						uni.navigateTo({
							url: '/pagesUser/msgCenter'
						});
					}
				});
			},
			
			/**
			 * 搜索商品
			 */
			bindKeyInput(e) {
				uni.navigateTo({
					url: '/pagesGoods/product/list'
				});
				uni.setStorage({
					key:'type',
					data:'searching'
				})
			},
	
			//获取分类列表
			loadData() {

				let that = this;
				that.$api.globalUtil.requestAjax({
					url: "/GoodsCategoryApi/getCategoriesAllForApi",
					method: "POST",
					success: function(res) {
						if (res.data.success) {
							that.firstCategoryList = res.data.response || [];
							that.currentId = that.firstCategoryList[0].id;
							that.second3CategoryList = that.firstCategoryList[0].secondGoodsCategories;
						} else {
							that.$api.msg(res.data.msg || "获取失败");
						}
					}
				});
			},

			//一级分类点击
			tabtap(item) {

				let that = this;

				that.currentId = item.id;
				that.second3CategoryList = item.secondGoodsCategories;
			},

			//分类商品列表
			navToList(tId, tName) {
				uni.navigateTo({
					url: `/pages/category/thirdList?categoryId=${tId}&categoryName=${tName}`
				});
			}
		}
	}
</script>

<style lang='scss'>
	page {
		overflow: hidden;
		background-color: #fff;
	}
	
	
	/* header */
	.bg-Container {
		position: fixed;
		top: 0;
		width: 100%;
		height: 176rpx;
	    z-index: 10;
		.bg {
			position: absolute;
			width: 100%;
			height: 100%;
		}
	
		.header-Container {
			position: relative;
			width: 100%;
			height: 176rpx;
	
			.content {
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: absolute;
				bottom: 16rpx;
				padding: 0 40rpx 0 32rpx;
				width: 100%;
				height: 54rpx;
	
				.search-input {
					position: relative;
					width: 600rpx;
					// height: 56rpx;
					border-radius: 28px;
					border: 1rpx solid rgba(245, 109, 10, 1);
	
					image {
						position: absolute;
						left: 30rpx;
						top: 16rpx;
						width: 26rpx;
						height: 26rpx;
					}
					input {
						box-sizing: border-box;
						padding-left: 74rpx;
						height: 56rpx;
						line-height: 56rpx;
						font-weight: 400;
						font-family: MicrosoftYaHei;
						font-size: 28rpx;
						border-radius: 28rpx;
						background-color: #ffffff;
					}
					.placeholder {
						font-weight: 400;
						font-family: MicrosoftYaHei;
						font-size: 28rpx;
						color: #999999;
					}
				}
	
				.btn-icon {
					display: block;
					width: 50upx;
					height: 50upx;
				}
				
				.msgCount {
					position: absolute;
					bottom: 36rpx;
					right: 30rpx;
					padding: 0 6rpx;
					box-shadow: 0px 1rpx 4rpx 0px rgba(68,68,68,0.2);
					min-width:26rpx;
					height:26rpx;
					line-height: 26rpx;
					text-align: center;
					font-size:20rpx;
					font-family:PingFang SC;
					font-weight:bold;
					color:rgba(219,13,83,1);
					background:rgba(255,255,255,1);
					box-shadow:0px 1rpx 4rpx 0px rgba(68,68,68,0.2);
					border-radius:13rpx;
				}
			}
		}
	}
	
	
	/* 页面内容 */
	.page-content {
		display: flex;
		overflow: hidden;
		position: fixed;
		top: 176rpx;
		width: 100%;
	}

	.left-aside {
		flex-shrink: 0;
		width: 200rpx;
		height: 100vh;
		background-color: #F5F5F5;
		position: fixed;
		left: 0;
	}

	.f-item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100upx;
		font-size: 26rpx;
		color: $font-color-base;
		position: relative;

		.tip {
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: 0;
			right: 0;
			color: white;
			background: #F78600;
			font-size: 17rpx;
			width: 88rpx;
			height: 30rpx;
			font-weight: 500;
			white-space: nowrap;
			border-radius: 17rpx 0 17rpx 0;
		}

		&.active {
			color: black;
			font-size: 31rpx;
			background: #fff;
			font-weight: bold;

			&:before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				height: 80rpx;
				width: 8rpx;
				background-image: linear-gradient(#CF00B6, #E01326);
				border-radius: 0 4px 4px 0;
				opacity: .8;
			}
		}
	}

	.right-aside {
		flex: 1;
		/* overflow: hidden; */
		padding-left: 20rpx;
		height: calc(100vh - 176rpx - 88rpx);
	}

	.s-item {
		display: flex;
		align-items: center;
		height: 70upx;
		padding-top: 8upx;
		font-size: 29rpx;
		color: black;
		font-weight: 700;
	}

	.t-list {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		background: #fff;
		padding-top: 12upx;

		&:after {
			content: '';
			flex: 99;
			height: 0;
		}
	}

	.t-item {
		flex-shrink: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 176upx;
		font-size: 23rpx;
		color: #666;
		padding-bottom: 20upx;

		image {
			width: 100rpx;
			height: 100rpx;
		}
	}

	.b-b::after {
		border: none !important;
	}
</style>



